<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            background-color:red;
        }
    </style>
</head>
<body>
    <button id="btn">你过来啊</button>
    <div id="box">

    </div>
    <script>
        //DOM2级事件处理程序 addEventListener() IE8不支持，Ie attachEvent()
        //DOM0级事件覆盖HTML事件；  
        var btn=document.getElementById('btn');
        // btn.addEventListener('click',fn,false);
        // btn.attachEvent('onclick',fn);

        addEvent(btn,'click',function(){
             console.log(this.innerHTML);
            });
        
        function addEvent(target,eventType,handler){
            if(target.addEventListener){
                target.addEventListener(eventType,handler,false);
            }else{
                target.addEvent('on'+eventType,function(){
                    handler.call(target);   
                });
            }
            
        }
        //获取事件的兼容
        window.onload=function(){
            var box=document.getElementById('box');
             box.onclick=function(e){
                   e=e||event;
                     this.innerHTML=e;
        }
        }
        //事件目标对象的兼容
        box.onclick=function(){
            e=e||event;
            var target=e.target||e.scrElement;
        }
       //事件代理 可以不用到FOR循环，让事件的实际目标对象target对象来完成的。提高性能降低代码复杂度。
       //能给未来的元素使用
       window.onload=function(){
            var box=document.getElementById('box');
             box.onclick=function(e){
                   e=e||event;
                   var target=e.target||e.scrElement;
                   target.style.backgroundColor='';
             }}
             
    </script>
</body>
</html>